<template>
  <div class="book-container">
    <book-category :channels="bookCategoryList"></book-category>
    <div class="book-main shadow">
      <book-list :list="books"></book-list>
    </div>
  </div>
</template>

<script>
  import  { mapState } from  'vuex'
    import reachBottom from "../../mixins/reachBottom";
  import BookCategory from "../../components/business/book/bookCategory";
  import BookList from "../../components/business/book/bookList";

    export default {
      components: { BookList, BookCategory },
      async asyncData({ app, params, store }){
          let books = await  app.$api.getBooks({
            alias: params.alias,
            pageNum: 1
          }).then(res => res.s === 1 ? res.d : [])
          return {
            books
          }
        },
      head(){
          return {
            title: '掘金小册'
          }
      },
      async validate({ app, params, store }){
          let initBookCategoryList = [{ name: '全部', alias: '' }]
        let bookCategoryList = []
        if (store.state.category.bookCategoryList.length){
          bookCategoryList =  store.state.category.bookCategoryList
        } else  {
          bookCategoryList = await app.$api.getBookChannel()
            .then(res => res.s === 1 ? initBookCategoryList.concat(res.d) : initBookCategoryList)
          store.commit('category/UPDATE_BOOK_CATEGORY_LIST', bookCategoryList)
        }
        return params.alias === undefined || bookCategoryList.includes(params.alias)
      },
      mixins: [reachBottom],
      comments: {

      },
      data(){
          return {
            books: [],
            pageNum: 1
          }
      },
      mounted() {

      },
      computed: {
          ...mapState('category', ['bookCategoryList'])
      },
      methods: {
          reachBottom(){
            this.pageNum++
          },
        async getBooks({ isLoadMore  = false } = {}){
            let res  = await  this.$api.getBooks({
              alias: this.$route.params.alias,
              pageNum: this.pageNum
            })
          if (res.s === 1) {
            this.books  = isLoadMore ? this.books.concat(res.d) : res.d
          }
        }
      }
    }
</script>

<style scoped>

</style>
